<template>
    <orh-table class="ddd" ref="htmlHeight">
        <Select slot="option" style="width: 200px" v-model="condition.semester_id" size="small" placeholder="请选择学期" @on-change="searchfun">
            <Option v-for="(item,index) in semesterList" :value="item.semester_id" :key="index">{{ item.semester_name.zh?item.semester_name.zh:item.semester_name.mn }}</Option>
        </Select>
        <Table :columns="columns" :data="data" :loading="tableload" :height="tableHeight" slot="table"></Table>
    </orh-table>
</template>
                
<script>
    export default {
        components: {},
        data() {
            return {
                tableHeight: 0,
                semesterList: [],
                tableload: false,
                Dis: true,
                data: [],
                formItem: {
                    admininspecttermdata_id: null,
                    feedback_name: {
                        zh: '已知晓',
                        en: null,
                        mn: null,
                    },
                },
                condition: {
                    semester_id: null,
                },
                content: null,
                columns: [{
                        title: '行政值班项名称',
                        // width: 150,
                        align: 'center',
                        render:(h,params)=>{
                            let name = params.row.administrativeduty.zh;
                            return h('div',name)
                        }
                    },
                    {
                        title: '行政值班检查项名称',
                        // width: 150,
                        align: 'center',
                        render:(h,params)=>{
                            let name = params.row.admininspectterms.zh;
                            return h('div',name)
                        }
                    },
                    {
                        title: '时间',
                        // width: 150,
                        align: 'center',
                        render: (h, params) => {
                            let name = params.row.created_at + '(' + params.row.week + ')'
                            return h('div', name)
                        }
                    },
                    {
                        title: '值班领导',
                        // width: 150,
                        align: 'center',
                        key: 'leader_name',
                        render:(h,params)=>{
                            if(params.row.leader_name !=null){
                                let name = params.row.leader_name.zh?params.row.leader_name.zh:params.row.leader_name.mn;
                                return h('div',name)
                            }
                            
                        }
                    },
                    {
                        title: '值班环节干部',
                        // width: 150,
                        align: 'center',
                        render:(h,params)=>{
                            if(params.row.cadre_name !=null){
                                let name = params.row.cadre_name.zh?params.row.cadre_name.zh:params.row.cadre_name.mn;
                                return h('div',name)
                            } 
                        }
                    },
                    {
                        title: '行政值班数据说明',
                        // width: 150,
                        align: 'center',
                        render:(h,params)=>{
                            if(params.row.explain !=null){
                                let name = params.row.explain.zh?params.row.explain.zh:params.row.explain.mn;
                                return h('div',name)
                            } 
                        }
                    },
                    {
                        title: '现场资料',
                        // width: 150,
                        align: 'center',   
                        render: (h, params) => {
                            return h('div', {
                                attrs: {
                                    style: 'width: 80px;height: 80px;'
                                },
                            }, [
                                h('img', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    attrs: {
                                        // src: params.row.snap_photos == null ? 'http://1.180.78.87/dc/framework/common/images/noPic_150x150.jpg' : params.row.snap_photos, style: 'width: 90%;height: 90%;border-radius: 2px;'
                                        src: params.row.img ? params.row.img : 'http://1.180.78.87/dc/framework/common/images/noPic_150x150.jpg',
                                        style: 'width: 90%;height: 90%;border-radius: 2px;'
    
                                    },
                                    style: {},
                                }),
                            ]);
                        }
                    },
    
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            let dis = params.row.feedback == 1 ? false : true
                            return h('div', [
                                h('Poptip', {
                                    props: {
                                        width: 300,
                                        placement: 'left',
                                        transfer: true,
                                        title: '反馈信息',
                                        content: this.content
                                    },
                                    style: {
                                        margin: '0 5px'
                                    },
                                    on: {
                                        'on-popper-show': () => {
                                            this.content = ''
                                            //    this.update(params.row,'card_code')
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small',
                                            disabled: !dis
                                        },
                                        style: {
                                            marginRight: '5px',
                                        },
                                        on: {
                                            click: () => {
                                                this.Info(params.row.admininspecttermdata_id)
                                            }
                                        }
                                    }, '查看'),
                                ]),
    
                                h('Poptip', {
                                    props: {
                                        width: 300,
                                        placement: 'left',
                                        transfer: true
                                    },
                                    style: {
                                        margin: '0 5px'
                                    },
                                    on: {
                                        'on-popper-show': () => {
                                            //    this.update(params.row,'card_code')
                                        }
                                    }
                                }, [
                                    h('div', {
                                        slot: 'content',
                                    }, [
                                        h('p', {
                                            style: {
                                                padding: '20px 0'
    
                                            }
                                        }, [
                                            h('Input', {
                                                props: {
                                                    type: 'text',
                                                    value: '已知晓' //此处如何让数据双向绑定
                                                },
                                                on: {
                                                    'on-change': (event) => {
                                                        this.Dis = event.target.value == '' ? true : false
                                                        console.log('改变')
                                                        console.log(event.target.value)
                                                        this.formItem.feedback_name.zh = event.target.value //设备编码
                                                    }
                                                }
                                            }),
                                        ]),
                                        h('p', {
                                            style: {
                                                textAlign: 'right'
    
                                            }
                                        }, [
                                            h('Button', {
                                                props: {
                                                    type: 'primary',
                                                    size: 'small',
                                                    // disabled:this.Dis
                                                },
                                                style: {
                                                    marginRight: '5px',
                                                },
                                                on: {
                                                    click: () => {
                                                        // this.submitdis=true
                                                        this.handleSubmit(params.row.admininspecttermdata_id)
                                                    }
                                                }
                                            }, '保存'),
                                        ]),
                                    ]),
    
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small',
                                            disabled: dis
                                        },
                                        style: {
                                            marginRight: '5px',
                                        },
                                        on: {
                                            // click: () => {
                                            //     this.handleSubmit(params.row.admininspectterm_id)
                                            // }
                                        }
                                    }, params.row.feedback == 1 ? '未反馈' : '已反馈'),
                                ]),
                            ]);
                        }
                    },
                ],
                url: 'api/watchlist/v1/admininspecttermdata/feedback',
            }
        },
        methods: {
            /************************************************************
             * 
             * 加载学期
             * 
             ************************************************************/
            semesterData() {
                this.$http.get('api/semester/v1/semester/semesterlists').then(val => {
                    this.semesterList = val.data
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                })
            },
    
            /************************************************************
             * 
             * 点击学期时
             * 
             ************************************************************/
            searchfun(val) {
                this.url = `api/watchlist/v1/admininspecttermdata/feedback?semester_id=${this.condition.semester_id}`, //通过班级找荣誉
                    this.queryData()
            },
            // ==================================================
            // 请求数据
            // ==================================================
            queryData() {
                this.tableload = true
                this.$http.get(this.url).then(val => {
                    
                    this.data = val.data
                    this.tableload = false
                    let a = this.$refs.htmlHeight.$el.offsetHeight
                    this.tableHeight = this.data.length == 0 ? 0 : (a - 150)
                    
                }).catch(err=>{
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                })
            },
            // ============================
            // 提交时 
            // ============================ 
            handleSubmit(id) {
                this.formItem.admininspecttermdata_id = id
                let form = JSON.parse(JSON.stringify(this.formItem))
                this.$http.post('api/watchlist/v1/admininspecttermdata/feedbackedit', form).then(val => {
                    this.queryData()
                    this.Dis = true //输入框禁用 
                }).catch(err=>{
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                })
            },
            // ============================
            // 单条查询 
            // ============================ 
            Info(id) {
                this.$http.get('api/watchlist/v1/admininspecttermdata/feedbackfind/' + id).then(val => {
                    this.content = val.data.feedback_name
                }).catch(err=>{
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                })
            },
    
        },
        mounted() {
    
            this.$http.get('api/semester/v1/semester/now_semester').then(val => {
                this.condition.semester_id = val.data[1].semester_id
            })
            this.semesterData()
            this.queryData()
        },
    }
</script>